<script setup lang="ts">
import type { UploaderFileListItem } from 'vant';
import { useI18n } from 'vue-i18n';
definePageMeta({
    layout: 'default-home',
    title: '设置',
    i18n: 'menu.setting',
})
const router = useRouter()
const goBack = () => {
    router.go(-1)
}
const imageUrl = ref<string>('');
const showImage = ref<boolean>(false);
const showEditIcon = ref<boolean>(false);
const showImageViewer = ref<boolean>(false);

const afterRead = (file: UploaderFileListItem | UploaderFileListItem[]) => {
    if (Array.isArray(file)) {
        handleFile(file[0] as any);
    } else {
        handleFile(file);
    }
};
// 上传图片
const handleFile = (fileItem: UploaderFileListItem) => {
    if (fileItem.file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            imageUrl.value = e.target?.result as string;
            showImage.value = true;
            showEditIcon.value = true;
        };
        reader.readAsDataURL(fileItem.file);
    } else {
        console.error('上传的文件无效');
    }
};
// 删除图片
const deleteImage = () => {
    imageUrl.value = '';
    showImage.value = false;
    showEditIcon.value = false;
};
// 图片预览
const openImageViewer = () => {
    if (imageUrl.value) {
        showImageViewer.value = true;
    }
};
// 关闭图片预览
const closeImageViewer = () => {
    showImageViewer.value = false;
};
const onSubmit = (e: any) => {

};
const username = ref('')
const phone = ref('')
const columns = [
    { value: 1, text: '+86' },
    { value: 2, text: '+99' },
    { value: 3, text: '+88' },
    { value: 4, text: '+77' },
    { value: 5, text: '+66' },
    { value: 6, text: '+55' },
    { value: 7, text: '+44' },
];
const showPicker = ref(false)
const curLable=ref('')
// 弹窗选中的值
const handlePickerConfirm = (selectedValues: number[]) => {
    curLable.value=(columns.find(v=>v.value==selectedValues[0]))!.text
}

</script>
<template>
    <div class="w-full h-100vh bg-#222628 p-15 pt-25 color-#fffefe">
        <div class="flex items-center ">
            <div class="bg-#394243  w-28 h-28 rounded-6 text-center leading-28 mr-10" @click="goBack">
                <van-icon name="arrow-left" color="#FFFFFF" />
            </div>
            <div>设置</div>
        </div>
        <van-form @submit="onSubmit" required="auto" rounded-10>
            <div class="boxs relative w-full h-74 mt-43 mb-35" @click="openImageViewer">
                <van-uploader v-if="!showImage" :after-read="afterRead" />
                <div v-else class="relative h-full box w-74">
                    <img v-if="showImage" :src="imageUrl" class="avatar w-74 rounded-full" />
                    <van-icon v-if="showEditIcon" name="edit"
                        class=" text-white bg-black bg-opacity-50 rounded-full p-1" @click.stop="deleteImage" />
                </div>
            </div>
            <div class="lable"> 用户名</div>
            <van-field v-model="username" name="username" :required="false" :border="false" placeholder="请填写用户名">
                <template #right-icon>
                    <img src="/imgs/search_close.png" alt="" class="w-18" @click="username = ''" v-if="username">
                </template>
            </van-field>
            <div class="lable">手机号</div>
            <van-field v-model="phone" name="phone" :border="false" :required="false" placeholder="请填写手机号">
                <template #left-icon>
                    <span v-if="curLable||phone.length"> {{curLable}}</span>
                </template>
                <template #right-icon>
                    <img src="/imgs/search_close.png" alt="" class="w-18" @click="phone = ''" v-if="phone">
                    <van-icon name="arrow" color="#FFFFFF" class="opacity-70" v-else @click="showPicker = true" />
                </template>
            </van-field>
        </van-form>
        <van-image-preview v-model:show="showImageViewer" :images="[imageUrl]" @close="closeImageViewer" />
        <div @click="onSubmit" class="btn w-full mx-auto py-10 text-center text-14 bg-#1475e0 rounded-5 mb-20 mt-60">确认
        </div>
         <!-- 更多弹窗 -->
    <GamePicker v-model:show="showPicker" :columns="columns" title="选择游戏" @confirm="handlePickerConfirm" />
    </div>
</template>
<style lang="css" scoped>
::v-deep .van-uploader__upload {
    border-radius: 50%;
    width: 72px;
    height: 72px;
    background: rgb(76, 76, 78);
}

::v-deep .box .van-icon {
    position: absolute;
    bottom: 5px;
    right: 9px;
    padding: 4px;

}

::v-deep .van-field__control {
    color: #ffffff;
}

::v-deep .van-field__left-icon {
    color: #ffffff;
}

::v-deep .van-field__label {
    color: #ffffff;
}


.lable {
    color: #aaafb0;
    margin-bottom: 13px;
    margin-top: 18px;
}

::v-deep .van-cell {
    line-height: 18px;
    background: #303536;
    border-radius: 6px;
    border: solid 1px rgba(255, 255, 255, 0.15);
}

.boxs {
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    /* margin-top: 10px; */
    position: absolute;
    right: 10px;
    border: solid 1px rgba(255, 255, 255, 0.15);
}
</style>